<template>
    <!-- pages/yidou/details/index.wxml -->
    <view>
        <view class="detailbox">
            <view class="flexbox-sb centers box1">
                <view class="centers" @tap="showTime">
                    <!-- <text class="box1text1 mr-10">{{nowtime}}</text> -->
                    <picker class="box1text1 mr-10" mode="date" fields="month" :value="currentDate" :start="minDate" :end="maxDate" @change="onInputTime">
                        <view class="picker">{{ nowtime }}</view>
                    </picker>
                    <view class="jiao"></view>
                </view>
                <view class="centers" @tap="showType">
                    <!-- <text class="box1text1 mr-10">{{typetit}}</text> -->
                    <picker @change="onChangeType" :value="index" :range="showtypeList">
                        <view class="picker">{{ showtypeList[index] }}</view>
                    </picker>
                    <view class="jiao"></view>
                </view>
            </view>
            <view class="flexbox-sb box2" v-if="detailList.length > 0" v-for="(item, index) in detailList" :key="index">
                <view>
                    <view class="box2text1">{{ item.remark }}</view>
                    <view>
                        <text class="box2text2">{{ item.createtime }}</text>
                        <!-- <text class="box2text2">12:00:03</text> -->
                    </view>
                </view>

                <view class="box2text3">
                    <text class="c-1" v-if="item.status == 1">+{{ item.amount }}</text>
                    <text class="c-2" v-if="item.status == 2">-{{ item.amount }}</text>
                </view>
            </view>
            <van-empty v-if="detailList.length == 0" description="暂无数据" />
        </view>
        <!-- <van-popup show="{{ showtype }}" round position="bottom" custom-style="height: 300px" bind:close="onCloseType" close-icon="cross" closeable>
    <view class="pbox1 mt-100">
      <van-picker show-toolbar title="标题" columns="{{ showtypeList }}" bind:cancel="onCancel" bind:change="onChangeType" show-toolbar="{{false}}" custom-class="pbox" visible-item-count="3"/>
    </view>
    
    <view class="btn1" bindtap="onType">
      确定
    </view>
  </van-popup>
  <van-popup show="{{ showtime }}" round position="bottom" custom-style="height: 346px" bind:close="onCloseTime" close-icon="cross" closeable>
    <view class="pbox2 mt-100">
      <van-datetime-picker type="year-month" value="{{ currentDate }}" min-date="{{ minDate }}" max-date="{{ maxDate }}"
        bind:input="onInputTime" show-toolbar="{{false}}" formatter="{{ formatter }}"/>
    </view>
    <view class="btn2" bindtap="onTime">
      确定
    </view>
  </van-popup> -->
    </view>
</template>

<script>
// pages/yidou/details/index.js
const app = getApp(); // 引入app

import _request from '../../../utils/request.js';
import { getTime } from '../../../utils/util.js'; // 引入utils;

const moment = require('../../../utils/moment.min');

export default {
    data() {
        return {
            imgUrl: app.globalData.imgUrl,
            //全局img路径
            showtype: false,
            showtime: false,
            currentDate: moment().format('YYYY-MM-DD'),
            minDate: moment().subtract(3, 'year').format('YYYY-MM-DD'),
            maxDate: moment().format('YYYY-MM-DD'),

            formatter(type, value) {
                if (type === 'year') {
                    return `${value}年`;
                }

                if (type === 'month') {
                    return `${value}月`;
                }

                return value;
            },

            nowtime: '',
            nowtime1: '',
            detailList: [],
            page: 1,
            showtypeList: ['全部', '收入', '支出'],
            index: 0,
            typetit: '全部',
            typetit1: '',
            type: 0,
            gettime: ''
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {},
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
        let time = getTime(new Date().getTime(), 4);
        this.setData({
            nowtime: time
        });
        let gettime = getTime(new Date().getTime(), 5);
        this.setData({
            gettime
        });
        this.getAssetDetail(this.page, gettime, false, this.type);
    },
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {
        this.setData({
            page: 1
        });
        this.getAssetDetail(this.page, this.gettime, false, this.type);
    },
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {
        this.setData({
            page: this.page + 1
        });
        this.getAssetDetail(this.page, this.gettime, false, this.type);
    },
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        // 显示时间弹窗
        showTime() {
            this.setData({
                showtime: true
            });
        },

        // 确定
        // onTime() {
        //   this.setData({
        //     showtime: false,
        //     detailList: [],
        //     nowtime: this.data.nowtime1,
        //     page: 1
        //   })
        //   this.getAssetDetail(this.data.page, this.data.gettime, false,this.data.type)
        // },
        // 关闭窗口
        onCloseTime() {
            this.setData({
                showtime: false
            });
        },

        // 获取时间
        onInputTime(event) {
            // let time = getTime(event.detail, 4)
            // let gettime = getTime(event.detail, 5)
            // this.setData({
            //   currentDate: event.detail,
            //   gettime: gettime,
            //   nowtime1: time
            // });
            let dt = event.detail.value;
            this.setData({
                detailList: [],
                currentDate: dt,
                nowtime: moment(dt).format('YYYY年MM月'),
                gettime: moment(dt).format('YYYYMM'),
                page: 1
            });
            this.getAssetDetail(this.page, this.gettime, false, this.type);
        },

        // 显示类型弹窗
        showType() {
            this.setData({
                showtype: true
            });
        },

        // 确定
        // onType() {
        //   this.setData({
        //     showtype: false,
        //     typetit: this.data.typetit1,
        //     page: 1
        //   })
        //   this.getAssetDetail(this.data.page, this.data.gettime, false,this.data.type)
        // },
        // 关闭窗口
        onCloseType() {
            this.setData({
                showtype: false
            });
        },

        // 获取选择类型
        onChangeType(event) {
            const index = event.detail.value;
            this.setData({
                index: index,
                page: 1,
                type: index
            });
            this.getAssetDetail(this.page, this.gettime, false, this.type);
        },

        // 获取意豆明细
        getAssetDetail(page, time, show, type) {
            if (show) {
                uni.showNavigationBarLoading(); // 顶部加载状态
            } // /bill/getDateColinListPage

            _request
                .get('/bill/getDateColinListForCondition', {
                    page,
                    date: time,
                    userId: uni.getStorageSync('userid'),
                    status: type
                })
                .then((res) => {
                    if (res.data.data != null) {
                        let list = res.data.data.map((item) => {
                            return item;
                        });
                        this.setData({
                            detailList: page > 1 ? [...this.detailList, ...list] : list
                        });
                    } else {
                        this.setData({
                            detailList: []
                        });
                    }

                    if (show) {
                        uni.hideNavigationBarLoading(); //完成停止加载

                        uni.stopPullDownRefresh(); //停止下拉刷新
                    }
                })
                .catch((error) => {
                    if (show) {
                        uni.hideNavigationBarLoading(); //完成停止加载

                        uni.stopPullDownRefresh(); //停止下拉刷新
                    }

                    console.log(error, 'error');
                });
        }
    }
};
</script>
<style>
/* pages/yidou/details/index.wxss */
/* 选项 */
.jiao {
    width: 0px;
    height: 0px;
    border-top: 12rpx solid #333333;
    border-left: 12rpx solid transparent;
    border-right: 12rpx solid transparent;
}

/* 明细 */
.detailbox {
    width: 710rpx;
    margin: 20rpx;
    padding: 0 20rpx 60rpx 20rpx;
    box-sizing: border-box;
    background: #ffffff;
    box-shadow: 1px 1px 4px 0px rgba(236, 236, 236, 0.4);
    border-radius: 6px;
}

.box1 {
    width: 100%;
    height: 124rpx;
    border-bottom: 1px solid #ededed;
}

.box1text1 {
    height: 50rpx;
    font-size: 28rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 50rpx;
}

.box2 {
    height: 144rpx;
    border-bottom: 1px solid #ededed;
    align-items: center;
}

.box2text1 {
    height: 40rpx;
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    line-height: 20px;
}

.box2text2 {
    height: 34rpx;
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
    line-height: 34rpx;
}

.box2text3 {
    height: 50rpx;
    line-height: 50rpx;
    font-size: 36rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
}

.c-1 {
    color: #ff1717;
}

.c-2 {
    color: #53d393;
}

/* 弹窗 */
.pbox1 {
    height: 360rpx;
}

.pbox2 {
    height: 360rpx;
}

.btn1 {
    width: 400rpx;
    height: 88rpx;
    background: #ff8722;
    border-radius: 22px;
    font-size: 32rx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ffffff;
    line-height: 88rpx;
    margin: 0 auto;
    margin-top: -30rpx;
    text-align: center;
}

.btn2 {
    width: 400rpx;
    height: 88rpx;
    background: #ff8722;
    border-radius: 22px;
    font-size: 32rx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ffffff;
    line-height: 88rpx;
    margin: 0 auto;
    margin-top: 50rpx;
    text-align: center;
}

.van-tab--active {
    font-size: 32rpx !important;
}

.pbox2 .van-picker {
    height: 360rpx !important;
}
</style>
